<template>
  <div class="center">
    <div class="userinfo flex">
      <div class="">
        <img v-if="!userinfo.img" class="userimg" src="../assets/img/center/user_img.png">
        <img v-if="userinfo.img" class="userimg" :src="userinfo.img">
      </div>
      <div class="username font_size28 flex-1 t_left">{{userinfo.username}}</div>
    </div>
    <div class="yu_einfo">
      <img class="yue_bgimg" src="../assets/img/center/center_yuebg.png">
      <div class="infos color_ff">
        <div class="yuetitle t_center">账户余额</div>
        <div class="font_size48 t_center">{{userinfo.balance}}</div>
        <div class="t_right p_r30">
          <span  @click="gotoPageFn(11)">查看<img class="jiantou_icon" src="../assets/img/icon/jiantou.png"></span>
        </div>
      </div>
    </div>
    <div class="page_list">
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_hyfl.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(1)">会员福利</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_yaoqing.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(10)">我的邀请</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_order.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(2)">我的订单</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_goods.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(3)">我的商品</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_thd.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(4)">我的提货单</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_phone.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(5)">联系电话</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_hyfl.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(6)">我的收货地址</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_yhk.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(7)">我的银行卡</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
      <div class="page_item flex p_r30">
        <div>
          <img class="page_item_img" src="../assets/img/center/center_sfyz.png">
          <span class="font_size28 m_l20 color_33" @click="gotoPageFn(8)">身份认证</span>
        </div>
        <div class="t_right flex-1">
          <img class="page_item_lefticon" src="../assets/img/icon/jiantou_left.png">
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <section class="bottom-tabs">
      <bottom-tabs :routerText="'我的'"/>
    </section>
  </div>
</template>

<script>
import BottomTabs from "../components/public/bottomTabs";
export default {
  name: "center",
  data() {
    return {
      userinfo: ''
    };
  },
  created() {
    this.$util.get('user/getUserInfoById', {
      uid: this.$store.state.userinfo.uid
    }).then(data => {
      this.userinfo = data.data
      this.$store.commit('setmoney', this.userinfo.balance)
    })

  },
  components: {
    BottomTabs
  },
  methods: {
    gotoPageFn(type) {
      switch (type) {
        case 1:
          this.$router.push("/member");
          break;
        case 2:
          this.$router.push("/order");
          break;
        case 3:
          this.$router.push("/mygoods");
          break;
        case 4:
          this.$router.push("/center_billoflading");
          break;
        case 5:
          this.$router.push("/contact");
          break;
        case 6:
          this.$router.push("/address");
          break;
        case 7:
          this.$router.push("/cordlist");
          break;
        case 8:
          this.$router.push("/authentication");
          break;
        case 10:
          this.$router.push("/invitation");
          break;
        case 11:
          this.$router.push({path: "/balance"});
          break;
      }
    }
  }
};
</script>

<style lang='less'  scoped>
@import "../assets/css/center/center.less";
</style>
